<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="flag">
            手机号登录：<input type="text" placeholder="请输入手机号" key="one">
        </div>
        <div v-else>
            邮箱地址登录：<input type="text" placeholder="请输入邮箱地址" key="two">
        </div>
        <button @click="change">切换登录方式</button>

        <!-- 
        1.出现问题：
        点击切换登录方式的时候，如果之前的input框输入了内容，切换后的input里面依然会保留输入的内容

        2.原因
        Vue在进行页面渲染的时候，出于性能考虑，会尽可能重复利用已经存在的元素，而不是重新渲染

        3.解决方案
        给两个input框添加key属性，并且取值不同，Vue在渲染的时候，就不会重复利用input元素

        -->

        <!-- key属性的作用：主要是为了更加高效的更新虚拟DOM -->
        <!-- Vue的虚拟DOM有一个Diff算法 -->
        <!-- 举例：在一个ABCDE列表中，在BC之间插入数字3 -->
        <!-- 1.没有key属性
            =>就把原来的C更新成3，原来的D更新成C，原来的E更新成D，最后在插入E；效率低下
            2.有key属性
            =>Diff算法就可以正确识别到这个节点，找到正确的位置插入新的节点

            因此：官方推荐在使用v-for的时候，给对应的元素或组件添加key属性
        
        -->
    </div>
    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                flag:true
            },
            methods:{
                change(){
                    this.flag=!this.flag;

                }
            }
        })
        console.log(app);
    </script>
</body>
</html>